import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getHotRecommendAction } from "../../store/actionCreators";
import { RecommendWrapper } from "./style";
import ThemHeader from "@/components/them-header";
import SongsCover from "@/components/songs-cover";
export default memo(function HotRecommend() {
  const dispatch = useDispatch();
  const { hotRecommends } = useSelector((state) => {
    return {
      hotRecommends: state.get("recommend").get("hotRecommends"),
    };
  }, shallowEqual);

  //console.log(hotRecommends);
  useEffect(() => {
    dispatch(getHotRecommendAction(8));
  }, [dispatch]);
  return (
    <RecommendWrapper>
      <ThemHeader
        title="热门推荐"
        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
      />
      <div className="list">
        {hotRecommends.map((item) => {
          return <SongsCover List={item} key={item.id} />;
        })}
      </div>
    </RecommendWrapper>
  );
});
